import React from 'react';
import { useNode, Element } from '@craftjs/core';
import { Tabs as AntTabs } from 'antd';
import settings from './settings';
import { RealTabs, RealTabContentWrapper } from './realTabs';
import TabContentWrapper from './tabContentWrapper';
import previewImg from '@/assets/images/componentPreview/tabs.svg';

const displayName = '标签页';
const { TabPane } = AntTabs;

const Tabs = ({ items, ...props }) => {
  const {
    connectors: { connect },
  } = useNode();

  return (
    <div style={{ paddingBottom: '20px' }} ref={connect}>
      <AntTabs {...props}>
        {items.map(({ label, key }) => (
          <TabPane forceRender key={key} tab={label}>
            <Element id={key} canvas is={TabContentWrapper} />
          </TabPane>
        ))}
      </AntTabs>
    </div>
  );
};

Tabs.craft = {
  displayName,
  props: {
    items: [
      {
        label: '标签页1',
        key: 'tab1',
      },
      {
        label: '标签页2',
        key: 'tab2',
      },
    ],
    type: 'line', // "line" | "card"
    size: 'middle', // "small" | "middle" | "large"
    tabPosition: 'top', // "top" | "right" | "bottom" | "left"
  },
  related: { settings },
};

export default {
  previewImg,
  displayName,
  component: Tabs, // 设计组件
  realComponent: RealTabs, // 真实渲染组件
  elementWrappers: [TabContentWrapper], // 设计组件内部的容器组件
  realComponentWrappers: [RealTabContentWrapper], // 真实渲染的组件内部的容器组件
};
